<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>抽奖活动页面</title>
    <link rel="stylesheet" type="text/css" href="./css/common.css"/>

</head>
<body style="background: url('./image/11.jpg');width: 100%; height: 100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size:100% 100%;
    display: inline-block;">

<div id="commonindexpage" style="width: 100%; height: 100%;color:#fff;">
    <!-- 顶部奖项title -->
    <div style="text-align: center;height: 250px; line-height: 260px;vertical-align: bottom; font-size: 6em;
        font-weight: bold; color: #fff; text-shadow: 16px 15px 11px #333;font-family: '华文彩云';">
        {{currentLevelTitle.name}}
    </div>
    <img @click="viewResult()" style="position:fixed; bottom: 10px; right: 10px;cursor: pointer;z-index: 995" src="./image/viewbtn.png" height="200"/>

    <div v-show="showResult === 1" style="text-align: center;height: calc(100% - 450px);width: 90%;float: left;font-size: 2em;margin-left: 10%;">
        <div v-for="(v,k) in gameResult.levelInfo" v-show="k === currentLevelTitle.code" style="width: 100%;margin-bottom: 20px;
    padding: 5px;">
            <div v-if="currentLevelTitle.code === k">
                <!--<div class="levelName" style="margin-bottom: 20px;">{{setInfo.level_name[k]}}</div>-->
                <div style="width: 100%;">
                    <div class="levelUser" style="margin-right: 3px;margin-bottom:10px;float:left;width:20%;" v-for="l in v">{{l}}({{gameResult.userName[l]}})&nbsp;</div>
                </div>
            </div>
        </div>
    </div>
    <div  v-show="showResult !== 1" style="text-align: center;height: calc(100% - 450px);font-family: '微软雅黑', 'Microsoft YaHei';
            ">
        <div v-show="gameStatus === 0" style="width: 45%;float: left;height: 100%;text-align: center;font-size: 2em;vertical-align: middle;position: relative;top: 20px;">
            <div v-for="u in randomDisplayUser">
                {{u.code}}({{u.name}})
            </div>
        </div>
        <div v-show="gameStatus === 1" style="width: 45%;float: left;height: 100%;text-align: center;font-size: 3em;vertical-align: middle;position: relative;top: 20px;">
            <img style="width: 260px" src="./image/zjl.png">
        </div>
        <div style="width: 50%;float: left;height: 100%;font-size: 3em;"
             v-show="winUserList && winUserList.length > 0 && gameStatus === 1">
            <div style="color: #fff;">中奖名单</div>
            <div style="padding: 10px;height: calc(100% - 10px); overflow-y: auto;">
                <div v-for="(k, i) in winUserList" style="float: left;width: 40%;">
                    <span>{{k}}({{playResult.userName[k]}})</span>
                </div>
            </div>
        </div>
    </div>

    <div style=" position: fixed;width: 100%;height: 200px;bottom: 0;
        line-height: 200px;
        vertical-align: middle;
        text-align: center;">
        <img @click="startPlay()"
             style="cursor: pointer;width: 250px;position: fixed; left: calc(50% - 150px);bottom: 43px;"
             src="./image/btt2.png">
        <span @click="startPlay()" style="position: fixed;cursor: pointer;font-size: 2.5em;color: #fff;
               left: calc(50% - 63px);">{{gameStatus == 0 ? "停止" : "开始"}}</span>
    </div>
</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="./js/vue.2.5.17.js"></script>
<script src="./js/axios.0.12.0.min.js"></script>
<script src="./js/common.js"></script>
<script type="text/javascript">
    var CommonUtilApp = new Vue({
        el: "#commonindexpage",
        data: {
            currentLevelTitle: {
                "code": "4", "name": "三等奖"
            },
            gameStatus: -1,
            winUserList: [],
            showResult: -1,
            functionList: [
                {
                    "name": "redis网页客户端",
                    "imgUrl": "./image/redis.png",
                    "functionPage": "http://localhost:8777/jedis-gui"
                },
                {"name": "常用小工具", "imgUrl": "./image/toolbox.png", "functionPage": "http://localhost:8777/utils"},
                {"name": "语音测试工具", "imgUrl": "./image/voice.png", "functionPage": "http://localhost:8777/voice-test"}
            ],
            setInfo: {},
            playResult: {},
            gameResult: {
                "user" : {},
                "count" : {},
                "levelInfo":{}
            },
            randomDisplayUser: [
                {"code": "01", "name": "test"},
                {"code": "02", "name": "test2"},
                {"code": "03", "name": "test3"},
                {"code": "04", "name": "test4"},
                {"code": "05", "name": "test5"}
            ],
            randomUserList: [],
            timerTask: null
        },
        created: function () {
            let path = window.location.href.split("?") //分割url
            if (path.length > 1) {
                let href = path[0]+"?"+path[1]
                console.log(path[1]);
                var vm = this;
                // 获取配置信息
                axios.get(hostname + "/game/setCurrentLevel?level="+path[1])
                    .then(function (response) {
                        console.log(response);
                        refreshSetInfo(vm);
                    })
                    .catch(function (error) {
                        addErrorTaost(vm, 'Error! Could not reach the API. ' + error);
                    });
            }
            refreshSetInfo(this);
            getResult(this);
        },
        methods: {
            viewResult: function() {
                this.getGameResult();
                if (this.showResult === -1) {
                    this.showResult = 1;
                } else {
                    this.showResult = -1;
                }
            },
            gotoFunctionPage: function (functionPageUrl) {
                window.open(functionPageUrl, "_blank");
            },
            getGameResult: function() {
                var vm = this;
                axios.get(hostname + "/game/getResult")
                    .then(function (response) {
                        console.log(response);
                        vm.gameResult = response.data;
                    })
                    .catch(function (error) {
                        addErrorTaost(vm, 'Error! Could not reach the API. ' + error);
                    });
            },
            startPlay: function () {
                var vm = this;
                if (vm.gameStatus === 0) {
                    vm.gameStatus = 1;
                    if (vm.timerTask) {
                        clearInterval(vm.timerTask);
                        vm.timerTask = null;
                    }
                    return;
                }
                if (vm.gameStatus !== 0) {
                    vm.gameStatus = 0;
                }
                randomTime(vm);
                axios.get(hostname + "/game/start?level=" + vm.currentLevelTitle.code)
                    .then(function (response) {
                        console.log(response.data);
                        vm.winUserList = response.data;
                        getResult(vm);

                    })
                    .catch(function (error) {
                        addErrorTaost(vm, 'Error! Could not reach the API. ' + error);
                    });
            }
        }

    });

    function refreshSetInfo(vm) {
        // 获取配置信息
        axios.get(hostname + "/game/getSetInfo")
            .then(function (response) {
                vm.setInfo = response.data;
                console.log(vm.setInfo);
                vm.currentLevelTitle.code = vm.setInfo.current_level;
                vm.currentLevelTitle.name = vm.setInfo.level_name[vm.setInfo.current_level];
            })
            .catch(function (error) {
                addErrorTaost(vm, 'Error! Could not reach the API. ' + error);
            });
    }

    function getResult(vm) {
        // 获取配置信息
        axios.get(hostname + "/game/getResult")
            .then(function (response) {
                vm.playResult = response.data;
                console.log(vm.playResult);
                var rlist = [];
                for (var u in vm.playResult.userName) {
                    rlist.push({"code": u, "name": vm.playResult.userName[u]});
                }
                vm.randomUserList = rlist;
            })
            .catch(function (error) {
                addErrorTaost(vm, 'Error! Could not reach the API. ' + error);
            });
    }

    function randomTime(vm) {
        vm.timerTask = setInterval(function () {
            var rdu = vm.randomDisplayUser;
            rdu[getRndInteger(0, rdu.length - 1)] = vm.randomUserList[getRndInteger(0, vm.randomUserList.length - 1)];
            var test = [];
            for(let i in rdu) {
                test.push(rdu[i]);
            }
            vm.randomDisplayUser = test;
            console.log(JSON.stringify(vm.randomDisplayUser));
        }, 10, 100);
    }

    function getRndInteger(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
</script>
</html>